<template>
  <div class="big1">
    <!-- 头部 -->

    <!-- 内容部分 -->
    <div class="headerBox">
      <div class="headerBox">
        <div class="header">
          <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>
          安全检查
        </div>
      </div>
      <!-- 内容部分 -->
    </div>
    <div class="safe_main" style="margin-top: 40px;">
      <div class="mainBox">
        <ul>
          <li @click="addCheck" style="overflow: hidden;">
            <div class="safe_first">
            <img :src="'../../../static/images/safe_icon1.png'" />
            </div>
            <span>新增安全检查</span>
            <x-icon type="ios-arrow-right" size="30" class="icon-right"></x-icon>
          </li>
          <div v-if="IsLocalHost">
            <li @click="$router.push('./safeAccount')">
                <img src="../../../static/images/safe_icon2.png" alt="">
                <span>安全检查台账</span>
                <x-icon type="ios-arrow-right" size="30" class="icon-right"></x-icon>
            </li>
            <li @click="$router.push('./needCheck')">
                <img src="../../../static/images/safe_icon3.png" alt="">
                <span>需要执行的检查</span>
                <x-icon type="ios-arrow-right" size="30" class="icon-right"></x-icon>
            </li>
            <li @click="$router.push('./checkPlanAssess')">
                <img src="../../../static/images/safe_icon4.png" alt="">
                <span>检查计划审批</span>
                <x-icon type="ios-arrow-right" size="30" class="icon-right"></x-icon>
            </li>
          </div>
        </ul>
      </div>
    </div>

    <div class="pop" v-show="flag">
      <div class="blackBg" @click="flag=false"></div>
      <div class="popCon">
        <div class="popTop">
          <a class="noClick left" v-if="activeIndex==0">上一步</a>
          <a class="yesClick left" @click="activeIndex--" v-else>上一步</a>
          <a class="yesClick right" v-if="activeIndex==2" @click="goPath">完成</a>
          <a class="yesClick right" @click="activeIndex1" v-if="activeIndex==0">下一步</a>
          <a class="yesClick right" @click="activeIndex2" v-if="activeIndex==1">下一步</a>
          <h3 v-if="activeIndex==0">新增类型</h3>
          <h3 v-else-if="activeIndex==1">{{type1}}</h3>
          <h3 v-else ref="typeName">{{type2}}</h3>
        </div>
        <ul class="popList" v-if="activeIndex==0">
          <li :class="activeIndexList[0]==index ? 'active' : ''" v-for="(item,index) in list" :key="index" @click="selectLi(index,item)">
            <p>{{item.type}}<img src="../../../static/images/list_checked.png"></p>
          </li>
        </ul>
        <ul class="popList" v-if="activeIndex==1">
          <li :class="activeIndexList[1]==index ? 'active' : ''" v-for="(item,index) in list2" :key="index" @click="selectLi2(index,item)">
            <p>{{item.type}}<img src="../../../static/images/list_checked.png"></p>
          </li>
        </ul>
        <ul class="popList" v-if="activeIndex==2">
          <li :class="ind==index ? 'active' : ''" v-for="(item,index) in list3" :key="index" @click="selectLi3(index,item)">
            <p>{{item.type}}<img src="../../../static/images/list_checked.png"></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import { IsLocalHost } from '@/utils/const'
  export default {
    data() {
      return {
        IsLocalHost: IsLocalHost,
        ind:0,
        type1:'',
        type2:'',
        params: {
          username: "admin",
          password: "123456"
        },
        name2:'',
        flag: false,
        list: [],
        list2:[],
        list3:[],
        activeIndexList: [0, 0, 0],
        activeIndex: 0,
        codeName:'安全检查类型',
        checkTypeList:[],
        clickFlog:false,
      };
    },
    created() {
      this.infoData()
      this.getCheckTypeList()
      if(!JSON.parse(window.sessionStorage.getItem('list'))){
        let that = this;
        this.$bridge.registerHandler("setToken", function(data) {
          that.$store.state.Authorization =
            "Bearer " + data;
          that.infoData()
          //这里data ioS返回的是token值(字符串)
        });
        this.connectWebViewJavascriptBridge(function(bridge) {
          bridge.init(function(message, responseCallback) {});
          bridge.registerHandler("setToken", function(data) {
            that.$store.state.Authorization =
              "Bearer " + data;
            that.infoData()
          });
        });
      }else{
        this.list=JSON.parse(window.sessionStorage.getItem('list'))
      }

    },
    mounted(){
      
    },
    methods: {
      connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
          callback(WebViewJavascriptBridge);
        } else {
          document.addEventListener(
            "WebViewJavascriptBridgeReady",
            function() {
              callback(WebViewJavascriptBridge);
            },
            false
          );
        }
      },
      infoData(){
        this.$axiosAjax.getCheckTypeList({codeName: this.codeName}).then(res => {
          if(res.data.success==true){
            var arr=[];
            for(var k of res.data.result){
              var obj={}
              obj.type=k.codeName
              arr.push(obj)
            }
            this.list=arr
            window.sessionStorage.setItem('list',JSON.stringify(this.list))
          }
        })
      },
      addCheck(){
        this.flag=true
      },
      getCheckTypeList(){
        this.$axiosAjax.getCheckTypeList({codeName: '安全检查类型'}).then(res => {
         if(res.data.success==true){
           var arr=[];
           res.data.result.forEach(item =>{
               arr.push(item.codeName)
             })
           this.checkTypeList.push(arr)
         }
        });
      },
      goBack() {
        // this.$router.go(-1);
        this.$bridge.callHandler({
          type: 'closePage',
          data: {}
        });
      },
      // 第一个下一步
      activeIndex1(){
        this.activeIndex=1
        this.type1=this.list[0].type
        this.codeName=this.list[0].type
        this.$axiosAjax.getCheckTypeList({codeName: this.codeName}).then(res => {
          if(res.data.success==true){
            var arr=[];
            for(var k of res.data.result){
              var obj={}
              obj.type=k.codeName
              arr.push(obj)
            }
            this.list2=arr
            this.type2=this.list2[0].type
            // this.$forceUpdate() // 强制刷新数据
          }
        });
      },
      // 第二个下一步
      activeIndex2(){
        this.activeIndex=2
        var arr3 =['新增检查计划','新增检查记录']
        var arr333=[]
        for(var k of arr3){
          var obj3={}
          obj3.type=k
          arr333.push(obj3)
        }
        this.list3=arr333
      },
      // 点击选择后的
      selectLi(index,item) {
        console.log(index,121,item.type)
        this.activeIndex=1
        this.clickFlog=true
        this.type1=item.type
        this.codeName=item.type
        this.$axiosAjax.getCheckTypeList({codeName: this.codeName}).then(res => {
          if(res.data.success==true){
            var arr=[];
            for(var k of res.data.result){
              var obj={}
              obj.type=k.codeName
              arr.push(obj)
            }
            this.list2=arr
            this.type2=this.list2[0].type
          }
        });
      },
      selectLi2(index,item){
        this.activeIndex=2
        this.type2=item.type
        var arr3 =['新增检查计划','新增检查记录']
        var arr333=[]
        for(var k of arr3){
          var obj3={}
          obj3.type=k
          arr333.push(obj3)
        }
        this.list3=arr333
      },
      selectLi3(index,item){
        this.ind=index
      },
      // 完成
      goPath(){
        var guid = "";
        for (var i = 1; i <= 32; i++){  // 生成36位数id
          var n = Math.floor(Math.random()*16.0).toString(16);
          guid +=   n;
          if((i==8)||(i==12)||(i==16)||(i==20))
            guid += "-";
        }
        // guid='d7aecda3-ccd7-476d-a482-4db0d6bebfee'
        var name =this.$refs.typeName.innerHTML
        if(this.ind==0){
          this.$router.push({path:'./addCheckPlan',query:{name:this.type2,name2:this.type1}})
        }else{
          this.$router.push({path:'./addCheckRecord1',query:{name:this.type2,id:guid,type:this.type1}})
        }
      }
    },

  };
</script>
<style lang="less" scoped>
  .big1 {
    width: 100%;
    height: 100%;
    position: relative;
    .safe_main {
      height: 627px;
      width: 100%;
      height: 593px;
      background-color: #fff;
      .safe_first {
        width:30px;
        height:30px;
        float: left;
        background: url('../../../static/images/safe_icon1.png') no-repeat;
        background-size: 30px;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      ul {
        padding: 0 20px 20px;
        li {
          padding: 20px 0 20px 20px;
          border-bottom: 1px solid #eee;
          position: relative;
          img {
            width: 30px;
            height: 30px;
          }
          .vux-x-icon {
            fill: #999;
            float: right;
            margin-top: 1px;
          }
          span {
            font-size: 14px;
            position: absolute;
            height: 74px;
            line-height: 74px;
            left: 70px;
            top: 0;
          }
        }
      }
    }
    .weui-actionsheet {
      top: 30%;
      // width: 90%;
      // left: 20px;
      background-color: rgba(0, 0, 0, 0);
    }
    .weui-actionsheet__menu {
      margin: 0 auto;
      width: 80%;
      // height: 200px;
      overflow-y: auto;
      line-height: 20px;
      border-radius: 10px;
    }
    .vux-actionsheet-menu-default {
      padding: 10px 20px !important;
      text-align: left;
      font-size: 16px;
    }
    .pop {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      .blackBg{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
      }
      .popCon {
        background: #fff;
        width: 100%;
        min-height: 300px;
        overflow-y: scroll;
        position: absolute;
        bottom: 0;
        border-radius: 20px 20px 0 0;
        padding: 10px 15px 0;
        z-index: 11;
        .popTop {
          position: relative;
          height: 40px;
          border-bottom: 1px solid #f0f1f5;
          a {
            display: block;
            position: absolute;
            font-size: 14px;
            line-height: 39px;
          }
          a.noClick {
            color: #ccc;
          }
          a.yesClick {
            color: #469b7a;
          }
          a.left {
            left: 5px;
          }
          a.right {
            right: 5px;
          }
          h3 {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            height: 39px;
            line-height: 39px;
          }
        }
        .popList {
          height: 224px;
          li {
            height: 46px;
            border-bottom: 1px solid #f0f1f5;
            position: relative;
            p {
              width: 100%;
              height: 45px;
              line-height: 45px;
              position: absolute;
              left: 50%;
              top: 0;
              transform: translate(-50%, 0);
              font-size: 14px;
              margin-left: 12px;
              text-align: center;
              img {
                height: 14px;
                width: 14px;
                margin-left: 10px;
                vertical-align: middle;
                position: relative;
                top: -1px;
                opacity: 0;
              }
            }
          }
          li.active {
            p {
              color: #469b7a;
            }
            img {
              opacity: 1;
            }
          }
        }
      }
    }
  }
</style>
